<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="菜单名称" prop="menuName">
        <el-input
          v-model="queryParams.menuName"
          placeholder="请输入菜单名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd()"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="handleLocalFilter"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="menuTreeList"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="menuName"
        label="菜单名称"
        align="left"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
            {{ scope.row.status === "1" ? "启用" : "停用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
            v-if="scope.row.parentId === 1 || scope.row.parentId === '1'"
            >新增</el-button
          >
          <el-button
            size="mini"
            type="text"
            :icon="scope.row.status === '1' ? 'el-icon-close' : 'el-icon-check'"
            @click="handleStatusChange(scope.row)"
            >{{ scope.row.status === "1" ? "停用" : "启用" }}</el-button
          >
          <el-button
            v-if="scope.row.menuName !== '文创商店' && scope.row.menuName !== '志愿者'"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改菜单配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="580px"
      append-to-body
      @close="closeDialog"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parentId">
              <el-select
                v-model="form.parentId"
                placeholder="请选择上级菜单"
                style="width: 100%"
                @change="handleParentMenuChange"
                :disabled="true"
              >
                <el-option
                  v-for="item in parentMenuOptions"
                  :key="item.id"
                  :label="item.menuName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input 
                v-model="form.menuName" 
                placeholder="请输入菜单名称"
                :disabled="form.menuName === '文创商店' || form.menuName === '志愿者'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容类型" prop="contentType">
              <el-select
                v-model="form.contentType"
                placeholder="请选择内容类型"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in contentTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="显示排序" prop="sort">
              <el-input-number
                v-model="form.sort"
                controls-position="right"
                :min="1"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="'1'">启用</el-radio>
                <el-radio :label="'0'">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMenuList,
  getMenuDetail,
  addMenu,
  updateMenu,
  deleteMenu,
  getMenuListByParentId,
} from "@/api/menu-setting";

export default {
  name: "MenuSetting",
  components: {},
  data() {
    return {
      // 状态常量
      ACTIVE_STATUS: "1",
      INACTIVE_STATUS: "0",
      DEFAULT_PARENT_ID: 1, // 世界技能的 ID

      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 菜单列表
      menuList: [],
      // 树形菜单列表
      menuTreeList: [],
      // 存储完整的菜单列表数据（未过滤）
      originalMenuList: [],
      // 存储完整的树形菜单列表数据（未过滤）
      originalMenuTreeList: [],
      // 上级菜单选项
      parentMenuOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        menuName: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        parentId: [
          { required: true, message: "上级菜单不能为空", trigger: "change" },
        ],
        menuName: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "显示排序不能为空", trigger: "blur" },
        ],
      },
      // 状态数据字典
      statusOptions: [
        { value: "1", label: "启用" },
        { value: "0", label: "停用" },
      ],
      // 内容类型选项
      contentTypeOptions: [
        { value: "Single", label: "公告风格" },
        { value: "List", label: "图文风格" },
      ],
    };
  },
  created() {
    // 初始化数据
    this.initData();
  },
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      this.getList();
      // 默认加载世界技能(ID=1)下的菜单选项
      this.getParentMenuOptions(this.DEFAULT_PARENT_ID);
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      getMenuList()
        .then((response) => {
          if (response.code === 200) {
            // 保存原始数据
            const data = response.data || [];
            this.handleMenuListData(data);

            // 存储原始数据，用于后续本地过滤
            this.originalMenuTreeList = JSON.parse(
              JSON.stringify(this.menuTreeList)
            );
            this.originalMenuList = JSON.parse(JSON.stringify(this.menuList));

            // 执行初始查询
            this.handleLocalFilter();
          } else {
            this.handleRequestError(response.msg || "查询菜单失败");
          }
        })
        .catch((error) => {
          console.error("获取菜单列表出错:", error);
          this.handleRequestError("获取菜单列表失败，请稍后重试");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 执行本地过滤
     */
    handleLocalFilter() {
      // 确保原始数据已加载
      if (!this.originalMenuList || !Array.isArray(this.originalMenuList)) {
        console.warn("原始菜单数据未加载，无法执行过滤");
        return;
      }

      // 检查查询条件是否为空
      const menuName = this.queryParams.menuName;
      const hasMenuNameFilter = Boolean(
        menuName !== undefined && 
        menuName !== null && 
        String(menuName).trim() !== ""
      );
      const hasStatusFilter = Boolean(
        this.queryParams.status !== undefined &&
        this.queryParams.status !== null &&
        this.queryParams.status !== ""
      );

      // 如果没有任何查询条件，直接使用原始数据
      if (!hasMenuNameFilter && !hasStatusFilter) {
        if (this.originalMenuTreeList && this.originalMenuTreeList.length > 0) {
          this.menuTreeList = JSON.parse(
            JSON.stringify(this.originalMenuTreeList)
          );
        }
        if (this.originalMenuList && this.originalMenuList.length > 0) {
          this.menuList = JSON.parse(JSON.stringify(this.originalMenuList));
        }
        return;
      }

      // 开始过滤
      this.loading = true;

      try {
        // 先对扁平数据进行过滤
        const filteredList = this.filterMenuList(this.originalMenuList);

        // 构建过滤后的树形结构数据
        this.buildFilteredTree(filteredList);
      } catch (error) {
        console.error("过滤菜单数据时出错:", error);
        this.$modal.msgError("搜索失败，请稍后重试");
      } finally {
        this.loading = false;
      }
    },
    /**
     * 过滤菜单列表
     * @param {Array} menuList 菜单列表
     * @returns {Array} 过滤后的菜单列表
     */
    filterMenuList(menuList) {
      if (!menuList || !Array.isArray(menuList)) return [];

      // 创建过滤条件
      const menuNameFilter = this.queryParams.menuName
        ? String(this.queryParams.menuName).toLowerCase()
        : null;

      // 改进状态过滤处理，确保空值被正确处理
      const statusValue = this.queryParams.status;
      const statusFilter =
        statusValue !== undefined && statusValue !== null && statusValue !== ""
          ? String(statusValue)
          : null;

      // 过滤菜单列表
      return menuList.filter((item) => {
        // 菜单名称过滤
        const nameMatch =
          !menuNameFilter ||
          (item.menuName &&
            item.menuName.toLowerCase().includes(menuNameFilter));

        // 状态过滤
        const statusMatch =
          statusFilter === null || String(item.status) === statusFilter;

        // 同时满足所有过滤条件
        return nameMatch && statusMatch;
      });
    },
    /**
     * 构建过滤后的树形结构
     * @param {Array} filteredList 过滤后的扁平菜单列表
     */
    buildFilteredTree(filteredList) {
      if (!filteredList.length) {
        this.menuTreeList = [];
        this.menuList = [];
        return;
      }

      // 直接使用过滤后的数据重新构建树，更可靠
      this.menuList = filteredList;
      this.menuTreeList = this.handleTree(
        filteredList,
        "id",
        "parentId",
        this.DEFAULT_PARENT_ID
      );
    },
    /**
     * 递归添加祖先ID
     * @param {String|Number} parentId 父级ID
     * @param {Set} idSet ID集合
     */
    addAncestorIds(parentId, idSet) {
      if (!parentId || parentId === 0 || parentId === "0") return;

      idSet.add(parentId);

      // 寻找更上层的祖先
      const parent = this.originalMenuList.find((item) => item.id === parentId);
      if (parent && parent.parentId) {
        this.addAncestorIds(parent.parentId, idSet);
      }
    },
    /**
     * 从过滤后的ID集合中构建树
     * @param {Array} treeData 原始树形数据
     * @param {Set} idSet 过滤后需要保留的ID集合
     * @returns {Array} 过滤后的树形数据
     */
    buildTreeFromFiltered(treeData, idSet) {
      if (!treeData || !Array.isArray(treeData)) return [];

      return treeData
        .filter((node) => idSet.has(node.id))
        .map((node) => {
          // 创建节点的深拷贝
          const newNode = { ...node };

          // 如果有子节点，递归处理
          if (node.child && node.child.length) {
            newNode.child = this.buildTreeFromFiltered(node.child, idSet);
          } else {
            newNode.child = [];
          }

          return newNode;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // 确保查询参数已更新（直接访问 queryParams，因为 v-model 已经同步）
      console.log("搜索参数:", this.queryParams);
      this.handleLocalFilter();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 先重置表单，让表单字段重置为初始值
      this.resetForm("queryForm");
      // 然后再手动重置查询参数，确保数据同步
      this.$nextTick(() => {
        this.queryParams = {
          menuName: undefined,
          status: undefined,
        };
        // 重置后重新加载数据
        this.handleLocalFilter();
      });
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      // 先重置表单所有字段为默认值
      this.form = {
        id: undefined,
        parentId: this.DEFAULT_PARENT_ID, // 默认先设为1
        menuName: "",
        sort: 1,
        status: "1",
        contentType: undefined
      };

      // 判断是从哪里触发的新增
      if (row && row.id) {
        // 是从行内点击的新增按钮
        
        // 修改父级ID为当前行ID
        this.form.parentId = row.id;
        
        // 设置下拉选项为当前行
        this.parentMenuOptions = [{
          id: row.id,
          menuName: row.menuName || '未知菜单'
        }];
      } else {
        // 是从顶部点击的新增按钮
        
        // 确保父级ID为世界技能(ID=1)
        this.form.parentId = this.DEFAULT_PARENT_ID;
        
        // 设置下拉选项为世界技能
        this.parentMenuOptions = [{
          id: this.DEFAULT_PARENT_ID,
          menuName: "世界技能"
        }];
      }

      // 清除表单验证状态
      this.$nextTick(() => {
        const formRef = this.$refs["form"];
        if (formRef) {
          formRef.clearValidate();
        }
      });

      // 打开对话框
      this.open = true;
      this.title = "添加菜单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      if (!row || !row.id) {
        this.$modal.msgError("参数错误");
        return;
      }
      
      // 先重置表单，避免保留之前的数据
      this.form = {
        id: undefined,
        parentId: this.DEFAULT_PARENT_ID,
        menuName: "",
        sort: 1,
        status: "1",
        contentType: undefined
      };
      
      this.loading = true;

      // 获取菜单详情并填充表单（会在获取详情后设置父菜单选项）
      this.getMenuDetailAndFillForm(row.id);
    },
    /**
     * 设置父菜单选项
     * @param {Object} row 当前行数据
     */
    setParentMenuOptions(row) {
      if (row.parentId === 1 || row.parentId === "1") {
        // 对于一级菜单，父菜单只能是"世界技能"
        this.parentMenuOptions = [
          { id: this.DEFAULT_PARENT_ID, menuName: "世界技能" },
        ];
      } else {
        // 对于二级菜单，找到其父菜单
        const parentMenu = this.menuList.find((m) => m.id === row.parentId);
        if (parentMenu) {
          this.parentMenuOptions = [
            {
              id: parentMenu.id,
              menuName: parentMenu.menuName,
            },
          ];
        } else {
          // 如果找不到父菜单，使用"世界技能"作为默认选项
          this.parentMenuOptions = [
            { id: this.DEFAULT_PARENT_ID, menuName: "世界技能" },
          ];
        }
      }

      this.loading = false;
    },
    /**
     * 获取菜单详情并填充表单
     * @param {String|Number} id 菜单ID
     */
    getMenuDetailAndFillForm(id) {
      getMenuDetail(id)
        .then((response) => {
          this.loading = false;
          if (response.code === 200) {
            // 确保表单数据格式正确
            const data = response.data || {};
            const parentId = data.parentId || this.DEFAULT_PARENT_ID;
            
            // 统一转换为字符串或数字进行比较
            const parentIdValue = String(parentId);
            const defaultParentIdValue = String(this.DEFAULT_PARENT_ID);
            
            this.form = {
              id: data.id,
              parentId: parentId,
              menuName: data.menuName || "",
              sort: parseInt(data.sort || "0", 10) || 1,
              status: data.status === "1" ? "1" : "0",
              contentType: data.contentType || undefined,
            };
            
            // 根据获取到的数据重新设置父菜单选项
            if (parentIdValue === defaultParentIdValue || parentIdValue === "1") {
              // 对于一级菜单，父菜单只能是"世界技能"
              this.parentMenuOptions = [
                { id: this.DEFAULT_PARENT_ID, menuName: "世界技能" },
              ];
              // 确保 form.parentId 与选项中的 id 类型一致
              this.form.parentId = this.DEFAULT_PARENT_ID;
            } else {
              // 对于二级菜单，找到其父菜单
              const parentMenu = this.menuList.find((m) => {
                return String(m.id) === String(parentId);
              });
              if (parentMenu) {
                this.parentMenuOptions = [
                  {
                    id: parentMenu.id,
                    menuName: parentMenu.menuName,
                  },
                ];
                // 确保 form.parentId 与选项中的 id 类型一致
                this.form.parentId = parentMenu.id;
              } else {
                // 如果找不到父菜单，使用"世界技能"作为默认选项
                this.parentMenuOptions = [
                  { id: this.DEFAULT_PARENT_ID, menuName: "世界技能" },
                ];
                this.form.parentId = this.DEFAULT_PARENT_ID;
              }
            }
            
            // 打开对话框
            this.open = true;
            this.title = "修改菜单";
            
            // 确保 Vue 更新视图（在下一个 tick 中验证表单，确保选项已正确设置）
            this.$nextTick(() => {
              // 这里可以添加额外的逻辑，比如表单验证等
            });
          } else {
            this.$modal.msgError(response.msg || "获取菜单详情失败");
          }
        })
        .catch((error) => {
          this.loading = false;
          console.error("获取菜单详情出错:", error);
          this.$modal.msgError("获取菜单详情失败，请稍后重试");
        });
    },
    /** 表单提交 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;

        this.loading = true;

        // 构建提交数据，确保字段格式与后端一致
        const data = this.buildSubmitData();

        // 根据是否有ID确定是新增还是修改
        if (this.form.id) {
          this.updateMenuData(data);
        } else {
          this.addMenuData(data);
        }
      });
    },
    /**
     * 构建提交数据
     * @returns {Object} 提交的数据对象
     */
    buildSubmitData() {
      const formData = {
        id: this.form.id,
        menuName: (this.form.menuName || "").trim(),
        parentId: String(this.form.parentId || this.DEFAULT_PARENT_ID), // 确保parentId始终是字符串
        sort: String(this.form.sort || 1),
        status: this.form.status, // 保持原始字符串格式
        contentType: this.form.contentType || undefined,
      };
      
      return formData;
    },
    /**
     * 更新菜单数据
     * @param {Object} data 提交的数据对象
     */
    updateMenuData(data) {
      // 验证关键字段
      if (!data.menuName) {
        this.$modal.msgError("菜单信息不完整，请检查");
        this.loading = false;
        return;
      }

      updateMenu(data)
        .then((response) => {
          if (response.code === 200) {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList(); // 重新获取整个列表以更新本地缓存
          } else {
            this.$modal.msgError(response.msg || "修改失败");
          }
        })
        .catch((error) => {
          console.error("菜单修改失败:", error);
          this.$modal.msgError("菜单修改失败，请重试");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 添加菜单数据
     * @param {Object} data 提交的数据对象
     */
    addMenuData(data) {
      // 验证关键字段
      if (!data.menuName) {
        this.$modal.msgError("菜单信息不完整，请检查");
        this.loading = false;
        return;
      }
    
      addMenu(data)
        .then((response) => {
          if (response.code === 200) {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList(); // 重新获取整个列表以更新本地缓存
          } else {
            this.$modal.msgError(response.msg || "新增失败");
          }
        })
        .catch((error) => {
          console.error("菜单新增失败:", error);
          this.$modal.msgError("菜单新增失败，请重试");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      if (!row || !row.id) {
        this.$modal.msgError("参数错误");
        return;
      }

      // 检查是否是不允许删除的菜单
      const protectedMenus = ["文创商店", "志愿者"];
      if (protectedMenus.includes(row.menuName)) {
        this.$modal.msgWarning(`菜单"${row.menuName}"不允许删除`);
        return;
      }

      // 检查是否有子菜单 - 通过树结构的child属性检查
      if (row.child && row.child.length > 0) {
        this.$modal.msgWarning("该菜单下存在子菜单，请先删除子菜单");
        return;
      }

      this.confirmAndDelete(row);
    },
    /**
     * 确认并删除菜单
     * @param {Object} row 当前行数据
     */
    confirmAndDelete(row) {
      this.$confirm(
        '是否确认删除名称为"' + row.menuName + '"的菜单项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.loading = true;
          return deleteMenu(row.id);
        })
        .then((response) => {
          this.loading = false;
          if (response.code === 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList(); // 重新获取整个列表以更新本地缓存
          } else {
            this.$modal.msgError(response.msg || "删除失败");
          }
        })
        .catch((error) => {
          this.loading = false;
          if (error !== "cancel") {
            // 忽略用户取消操作
            console.error("删除菜单出错:", error);
            this.$modal.msgError("删除失败，请稍后重试");
          }
        });
    },
    /** 状态修改 */
    handleStatusChange(row) {
      if (!row || !row.id) {
        this.$modal.msgError("参数错误");
        return;
      }

      // 切换状态值（保持字符串比较）
      const currentStatus = row.status;
      const newStatus = currentStatus === "1" ? "0" : "1";
      
      // 直接调用确认修改函数，不再传递text参数
      this.confirmAndChangeStatus(row, newStatus);
    },
    /**
     * 确认并修改状态
     * @param {Object} row 当前行数据
     * @param {String} newStatus 新状态值
     */
    confirmAndChangeStatus(row, newStatus) {
      // 使用一个变量存储操作文本，避免重复计算
      const operationText = newStatus === "1" ? "启用" : "停用";
      this.$confirm("确认要" + operationText + '菜单"' + row.menuName + '"吗?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          return updateMenu({
            id: row.id,
            status: newStatus, // 直接使用字符串状态值
          });
        })
        .then((response) => {
          this.loading = false;
          if (response.code === 200) {
            row.status = newStatus; // 更新本地状态

            // 更新原始数据中对应项的状态
            this.updateOriginalDataStatus(row.id, newStatus);

            this.$modal.msgSuccess(operationText + "成功");
          } else {
            this.$modal.msgError(response.msg || operationText + "失败");
          }
        })
        .catch((error) => {
          this.loading = false;
          if (error !== "cancel") {
            // 忽略用户取消操作
            console.error("更新菜单状态出错:", error);
            this.$modal.msgError(operationText + "失败，请稍后重试");
          }
        });
    },
    /**
     * 更新原始数据中的状态
     * @param {String|Number} id 菜单ID
     * @param {String} status 新状态
     */
    updateOriginalDataStatus(id, status) {
      if (!id) return;

      // 更新扁平列表中的状态
      const item = this.originalMenuList.find((item) => item.id === id);
      if (item) {
        item.status = status;
      }

      // 更新树形结构中的状态（递归）
      this.updateTreeItemStatus(this.originalMenuTreeList, id, status);
    },
    /**
     * 递归更新树形结构中节点的状态
     * @param {Array} treeData 树形数据
     * @param {String|Number} id 菜单ID
     * @param {String} status 新状态
     * @returns {Boolean} 是否找到并更新了节点
     */
    updateTreeItemStatus(treeData, id, status) {
      if (!treeData || !Array.isArray(treeData) || !id) return false;

      for (const item of treeData) {
        // 找到匹配的节点，更新状态
        if (item.id === id) {
          item.status = status;
          return true;
        }

        // 递归检查子节点
        if (
          item.child &&
          item.child.length &&
          this.updateTreeItemStatus(item.child, id, status)
        ) {
          return true;
        }
      }

      return false;
    },
    // 表单重置
    reset() {
      // 默认表单值
      this.form = {
        id: undefined, // 新增时无ID
        parentId: this.DEFAULT_PARENT_ID, // 默认值为1，对应"世界技能"
        menuName: "", // 空菜单名称
        sort: 1, // 默认排序值为1
        status: "1", // 默认状态为启用("1")，保持字符串类型
        contentType: undefined, // 内容类型
      };
      
      // 确保在DOM更新后重置表单验证状态
      this.$nextTick(() => {
        const formRef = this.$refs["form"];
        if (formRef) {
          try {
            // 先重置字段
            formRef.resetFields();
            // 再清除验证状态
            formRef.clearValidate();
          } catch (e) {
            console.error("重置表单出错:", e);
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      // 关闭对话框
      this.open = false;
      // 重置表单（会在下一帧执行）
      this.reset();
    },
    /** 获取父级菜单选项 */
    getParentMenuOptions(parentId = 1) {
      // 确保parentId有效，默认为1（顶级菜单）
      parentId = parentId || this.DEFAULT_PARENT_ID;

      this.loading = true;
      getMenuListByParentId(parentId)
        .then((response) => {
          this.loading = false;
          if (response.code === 200) {
            this.parentMenuOptions = response.rows || [];
          } else {
            this.$modal.msgError(response.msg || "获取上级菜单失败");
          }
        })
        .catch((error) => {
          this.loading = false;
          console.error("获取上级菜单列表出错:", error);
          this.$modal.msgError("获取上级菜单失败，请稍后重试");
        });
    },
    /** 处理父级菜单变化 */
    handleParentMenuChange() {
      // 在当前使用场景中，父菜单已经是固定选项，不需要重新加载
      // 由于select已经被禁用，此函数实际上不会被触发
    },
    /**
     * 处理菜单列表数据
     * @param {Array} data 菜单列表数据
     */
    handleMenuListData(data) {
      if (!data || !Array.isArray(data)) {
        this.menuTreeList = [];
        this.menuList = [];
        return;
      }

      // 如果返回的数据已经是树形结构（有child字段），则直接使用
      if (data.length > 0 && data[0].child !== undefined) {
        // 确保所有节点的status字段都是字符串类型
        this.ensureStatusIsString(data);
        this.menuTreeList = data;
        // 扁平化数据以计算总数
        this.menuList = this.flattenTree(data);
      } else {
        // 如果是平铺的数据，则处理后转换为树形结构
        this.menuList = data;

        // 处理菜单数据，添加父级菜单名称
        this.menuList.forEach((item) => {
          // 确保状态为字符串格式，用于前端显示
          item.status = String(item.status || "0");

          if (item.parentId === 0 || item.parentId === "0") {
            item.parentName = "顶级菜单";
          } else {
            const parentMenu = this.menuList.find(
              (m) => m.id === item.parentId
            );
            item.parentName = parentMenu ? parentMenu.menuName : "-";
          }
        });

        // 将平铺的菜单列表转为树形结构
        // 传入 DEFAULT_PARENT_ID (1) 作为根节点ID，因为返回的数据的 parentId 都是 "1"
        this.menuTreeList = this.handleTree(this.menuList, "id", "parentId", this.DEFAULT_PARENT_ID);
      }
    },
    /**
     * 确保所有节点的status字段为字符串类型
     * @param {Array} nodes 节点数组
     */
    ensureStatusIsString(nodes) {
      if (!nodes || !Array.isArray(nodes)) return;

      nodes.forEach((node) => {
        // 将status转换为字符串
        if (node.status !== undefined) {
          node.status = String(node.status);
        }

        // 递归处理子节点
        if (node.child && Array.isArray(node.child) && node.child.length > 0) {
          this.ensureStatusIsString(node.child);
        }
      });
    },
    /**
     * 处理请求错误
     * @param {String} errorMsg 错误信息
     */
    handleRequestError(errorMsg) {
      this.$modal.msgError(errorMsg);
      this.menuList = [];
      this.menuTreeList = [];
    },
    /**
     * 将平铺的菜单列表转换为树形结构
     * @param {Array} data 原始数据
     * @param {String} id ID字段名
     * @param {String} parentId 父级ID字段名
     * @param {Number} rootId 根节点ID
     * @returns {Array} 树形结构数据
     */
    handleTree(data, id, parentId, rootId = 0) {
      if (!Array.isArray(data)) {
        console.warn("handleTree: data is not an array");
        return [];
      }

      // 使用数据的副本，避免影响原始数据
      const cloneData = JSON.parse(JSON.stringify(data));

      // 将所有数据转换为对象，键为id
      const idMap = {};
      for (const item of cloneData) {
        idMap[item[id]] = { ...item, child: [] };
      }

      // 构建树形结构
      const result = [];
      for (const item of cloneData) {
        const parentItem = idMap[item[parentId]];

        // 如果找到父项，将当前项添加到父项的child中
        if (parentItem && item[id] !== item[parentId]) {
          parentItem.child.push(idMap[item[id]]);
        }
        // 如果是根节点，将当前项添加到结果数组中
        else if (
          (item[parentId] == rootId || item[parentId] == String(rootId)) &&
          item[id] !== item[parentId]
        ) {
          result.push(idMap[item[id]]);
        }
        // 如果没有找到父项，也将其作为顶级节点处理（防止数据丢失）
        // 这通常发生在父节点不在返回的数据中时
        else if (!parentItem && item[id] !== item[parentId]) {
          result.push(idMap[item[id]]);
        }
      }

      return result;
    },
    /**
     * 将树形结构扁平化为一维数组
     * @param {Array} tree 树形结构数据
     * @returns {Array} 扁平化后的数组
     */
    flattenTree(tree) {
      if (!Array.isArray(tree)) {
        return [];
      }

      let result = [];
      tree.forEach((item) => {
        result.push({ ...item });
        if (item.child && item.child.length > 0) {
          result = result.concat(this.flattenTree(item.child));
        }
      });

      return result;
    },
    /** 关闭对话框时的处理函数 */
    closeDialog() {
      // 重置表单
      this.reset();
      
      // 清空校验错误信息
      this.$nextTick(() => {
        const formRef = this.$refs["form"];
        if (formRef) {
          formRef.clearValidate();
        }
      });
    },
  },
};
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}
</style>
